<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <link rel="stylesheet" href="stylesheets/reset.css">
  <link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>
<!-- 
数据和 DOM 已经被建立了关联，所有东西都是响应式的 
 修改数据 对应的视图会发生变化
 -->
<div id="app">
	<h1>{{ msg }}</h1>
	<!-- <img width="300" src="./images/wbb.jpeg" alt=""> -->
	<!-- <img v-bind:width="w" src="img"> -->
	<img v-bind:width="w" v-bind:src="img">
</div>
<script src="./vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		// 状态
		data: {
			msg: "hello vue!",
			w: 400,
			img: "./images/wbb.jpeg"
		},
		created() {
			// console.log(this.msg)
			this.msg = "被created修改了"
		}
	})


	// console.log(Vue)
</script>
</body>
</html>
